<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script src="../assets/flexible/flexible.debug.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/core.css">
    <link rel="stylesheet" href="../assets/animate/animate.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">

    <body>
        <header class="header">
            <div class="left iconfont">&#xe610;</div>
            <div class="center">领卷中心</div>
            <div class="right">...</div>
        </header>
        <div class="swiper-container nav">
            <div class="swiper-wrapper">
                <div class="swiper-slide one on">全场</div>
                <div class="swiper-slide one">男士</div>
                <div class="swiper-slide one">女士</div>
                <div class="swiper-slide one">养生</div>
                <div class="swiper-slide one">皮肤</div>
                <div class="swiper-slide one">慢病</div>
                <div class="swiper-slide one">器械</div>
            </div>
        </div>

        <div class="swiper-container container">
            <div class="swiper-wrapper wrapper">
                <div class="swiper-slide slide clearfix">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
                <div class="swiper-slide slide">
                    <img src="../images/28.png">
                    <img src="../images/29.png">
                    <img src="../images/30.png">
                    <img src="../images/28.png">
                </div>
            </div>
        </div>
        <div class="guide">
            <ul>
                <li class="iconfont">&#xe63a;<span>搜索</span></li>
                <li class="iconfont">&#xe6a9;<span>首页</span></li>
                <li class="iconfont">&#xe507;<span>消息</span></li>
            </ul>
        </div>

        <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
        <script src="../assets/font/iconfont.js"></script>
        <script src="../assets/swiper/js/swiper.jquery.min.js"></script>
        <script>
            $(".left").click(function () {
                location.href = "../index.html"
            })
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 5.4,
                paginationClickable: true,
            });

            var mySwiper = new Swiper('.container', {
                onTransitionEnd: function (swiper) {
                    $('.one').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
                }
            })

            $('.one').click(function () {
                $(this).addClass('on').siblings().removeClass('on');
                mySwiper.slideTo($(this).index(), 1000);

            });
            $(".right").click(function () {
                $(".guide").slideToggle();
            })
        </script>
    </body>
</head>